<template>
    <div class="header">
              <Input search placeholder="请输入搜索商品" />
           <div class="top">
             <Button type="success" @click="retur">返回</Button>
            <Button type="warning" v-if="names">{{names.name}}</Button>
            <Button type="warning" v-else>登录</Button>
            <Button type="warning" @click='goOut'>退出登录</Button>
           </div>
         
        <!-- {{msg}} -->
       
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:"我是头部header组件",
            value:"",
            names:""
        };
    },
    created() {
        this.names =JSON.parse(localStorage.getItem("obj"))
        console.log(this.names)
    },
    methods: {
        retur(){
            this.$router.go(-1)
        },
        goOut() {
          this.$router.push('/login')
      }
    },
    components: {

    },
};
</script>

<style>
.header{
    height: 50px;
     background: cornflowerblue;
}
.ivu-input-wrapper{
     width: 60%;
     margin-top: 10px;
     margin-left: -25px;
}
.top{
    display: flex;
    justify-content: space-between;
    margin-top: -30px;
}
.top button:first-of-type{
  
}
.top button:last-of-type{
  
}
</style>